<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
  <style type="text/css">
    .box{
      border:1px solid black;
      width:200px;
      height:150px;
      background-image: linear-gradient(to right top,red,pink,skyblue,blue);
      margin: 0 auto;
    }
  </style>
</head>
<body>
<!--现需求为要对其中的数据进行遍历显示，并结合条件渲染展示性别，且需要实现一个新增信息的功能-->
<div id="app">
  <div>
    <h3>人员信息</h3>
    <ul>
      <li v-for="item in items" :key="item.id">{{item.name}}---{{item.sex===0?"男":"女"}}</li>
    </ul>
    <button @click="addInfo">{{addText}}</button>
  </div>
  <div class="box" v-show="addFlag">
    <p>名称：<label>
      <input type="text" v-model="name">
    </label></p>
    <p>性别：<label>
      <input type="radio" name="sex" checked v-model="sex" value="0">
    </label>男 <label>
      <input type="radio" name="sex" v-model="sex" value="1">
    </label>女</p>
    <button @click="newInfo">提交</button>
  </div>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
  const vm=new Vue({
    el:"#app",
    data(){
      return{
        //准备一个待渲染的列表数据
        items:[
          {id:"001",name:"张三",sex:0},
          {id:"002",name:"李四",sex:1},
          {id:"003",name:"王五",sex:1},
        ],
        addFlag:false,
        name:"",
        sex:0,
        addText:"新增人员"
      }
    },
    methods: {
      addInfo() {
        this.addFlag = !this.addFlag
      },
      newInfo(){
        //判断是否输入正确的额名称
        if (this.name.length>2){
          //正常提交
          //获取最新的id
          let num=this.items.length
          let people={
            id:"00"+(++num),name:this.name,sex:this.sex
          }
          this.items.push(people)
          this.addFlag=false
        }else{
          //进行提醒
          alert("您输入的名称信息错误，请检查后再次输入正确的信息")
        }
      }
    }
  })
</script>
</body>
</html>
